<script lang="ts" setup>
import { ref, watch } from "vue";
import {
  CloseOutlined,
  SettingOutlined,
  CheckOutlined,
} from "@ant-design/icons-vue";
import Body from "./Body.vue";
import { storeToRefs } from "pinia";
import { useThemeStore } from "@/store/theme.ts";
import { RadioChangeEvent } from "ant-design-vue";
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

const open = ref(false);
const handleVisible = (visible: boolean) => {
  open.value = visible;
};
const colorList = [
  "#1677FF",
  "#F5222D",
  "#FAAD14",
  "#52C41A",
  "#2F54EB",
  "#722ED1",
];
const themeStore = useThemeStore();
const { menuTheme, colorTheme } = storeToRefs(themeStore);
const onChangeTheme = ({ target }: RadioChangeEvent) => {
  themeStore.changeMenuTheme(target.value);
};

const pureColor = ref("white");
const gradientColor = ref(
  "linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)",
);
watch(pureColor, val => {
  if (val !== "white") {
    themeStore.changeColorTheme(val);
  }
});
const colorItemCilck = (item: string) => {
  pureColor.value = "white";
  themeStore.changeColorTheme(item);
};
</script>

<template>
  <div
    class="drawer-setting"
    :style="{ backgroundColor: colorTheme }"
    @click="handleVisible(!open)"
  >
    <CloseOutlined v-if="open" style="font-size: 20px" />
    <SettingOutlined v-else style="font-size: 20px" />
  </div>
  <a-drawer :closable="false" :open="open" :width="300" placement="right">
    <template #handle>
      <div
        class="drawer-setting"
        :style="{
          position: 'absolute',
          top: '240px',
          right: '300px',
          backgroundColor: colorTheme,
        }"
        @click="handleVisible(!open)"
      >
        <CloseOutlined v-if="open" style="font-size: 20px" />
        <SettingOutlined v-else style="font-size: 20px" />
      </div>
    </template>
    <Body title="主题色">
      <div class="setting-theme-color">
        <div
          v-for="item in colorList"
          :key="item"
          :style="{ backgroundColor: item }"
          class="setting-theme-color-block"
          @click="colorItemCilck(item)"
        >
          <CheckOutlined v-show="colorTheme === item" />
        </div>
        <div style="margin-top: 6px; position: relative; float: left">
          <color-picker
            format="hex"
            shape="circle"
            pickerType="chrome"
            disableAlpha
            v-model:pureColor="pureColor"
            v-model:gradientColor="gradientColor"
          />
          <span :style="{ fontSize: '12px', color: pureColor }">其他颜色</span>
          <CheckOutlined
            v-show="colorTheme === pureColor"
            :style="{
              position: 'absolute',
              top: '-5px',
              left: '25px',
              color: pureColor,
            }"
          />
        </div>
      </div>
    </Body>
    <Body title="菜单背景">
      <a-radio-group :value="menuTheme" @change="onChangeTheme">
        <a-radio value="light">浅色</a-radio>
        <a-radio value="dark">深色</a-radio>
      </a-radio-group>
    </Body>
  </a-drawer>
</template>

<style lang="less" scoped>
.drawer-setting {
  position: fixed;
  inset-block-start: 240px;
  inset-inline-end: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  color: #fff;
}

.setting-theme-color {
  overflow: hidden;

  .setting-theme-color-block {
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 8px;
    margin-right: 8px;
    font-weight: 700;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
  }
}
</style>
<style lang="less">
.vc-color-wrap.round {
  border-radius: inherit !important;
}
</style>
